<script>
import {reactive, shallowReactive, ref} from "vue";

export default {
  name: "App",
  setup(props, context) {
    /*
    ref()
      接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
      模板内的refVue会帮我们自动解包
      ref()用来定义简单类型的数据(也可以定义复杂类型的数据)
    */
    // 使用ref定义简单的数据类型
    let count = ref(0)
    function add() {
      //count是ref类型的对象 RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 0, _value: 0}
      console.log(count)
      count.value++
    }

    return {
      count,
      add
    }
  }
}
</script>
<template>
  <div class="App">
    <!--默认情况下模板内的ref类型的数据Vue会帮我们自动解包-->
    <h1>{{ count }}</h1>
    <button @click="add">+1</button>
  </div>
</template>

<style lang="less">

</style>
